<%@ page import="java.util.ArrayList" %>
<%@ page import="com.onlinevideo.entity.User" %>
<%@ page import="com.onlinevideo.service.impl.UserServiceImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="com.onlinevideo.entity.Page" %>
<%@ page import="com.onlinevideo.service.impl.RoleServiceImpl" %>
<%@ page import="com.onlinevideo.entity.Role" %>
<%@ page import="com.onlinevideo.service.RoleService" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../static/js/sweetalert.min-2.1.2.js" type="text/javascript"></script>
    <style type="text/css">
        th {
            text-align: center;
        }

        td {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var recordUsername;
            var recordPassword;
            var recordEditPhone;
            var recordEditEmail;
            var recordEditNickname;
            var recordUserType;
            var recordUserStatus;
            var recordUserValidity;
            $(".editInfo").click(function () {
                $("#submitEdit").attr("data-id", $(this).attr("data-id"));
                var td = $(this).parents("tr").find("td");
                $("#editUserName").val(td.eq(1)[0].innerHTML.trim());
                $("#editPassword").val(td.eq(2)[0].innerHTML.trim());
                $("#editPhone").val(td.eq(4)[0].innerHTML.trim());
                $("#editNickname").val(td.eq(5)[0].innerHTML.trim());
                $("#editUserType").val(td.eq(6).attr("data-id").trim());
                $("#editEmail").val(td.eq(7)[0].innerHTML.trim());
                $("#editUserStatus").val(td.eq(8).attr("data-id").trim());
                $("#editUserValidity").val(td.eq(9).attr("data-id").trim());

                recordUsername = $("#editUserName").val().trim();
                recordPassword = $("#editPassword").val().trim();
                recordEditPhone = $("#editPhone").val().trim();
                recordEditEmail = $("#editEmail").val().trim();
                recordEditNickname = $("#editNickname").val().trim();
                recordUserType = $("#editUserType").val().trim();
                recordUserStatus = $("#editUserStatus").val().trim();
                recordUserValidity = $("#editUserValidity").val().trim();


            });
            //提交修改
            $("#submitEdit").click(function () {
                var username = $("#editUserName").val().trim();
                var userId = $(this).attr("data-id");
                var password = $("#editPassword").val().trim();
                var editPhone = $("#editPhone").val().trim();
                var editEmail = $("#editEmail").val().trim();
                var editNickname = $("#editNickname").val().trim();
                var userType = $("#editUserType").val().trim();
                var userStatus = $("#editUserStatus").val().trim();
                var userValidity = $("#editUserValidity").val().trim();
                var formData = new FormData();
                var files = document.getElementById("editLogoImg").files;
                var logoFile = files[0];

                if (!username || !password || !editPhone || !editEmail || !editNickname) {
                    swal("警告", "数据不能为空", "error").then(function (isOk) {
                    });
                    return;
                }
                if (username === recordUsername
                    && password === recordPassword
                    && editPhone === recordEditPhone
                    && editEmail === recordEditEmail
                    && editNickname === recordEditNickname
                    && userType === recordUserType
                    && userStatus === recordUserStatus
                    && userValidity === recordUserValidity && files.length <= 0) {

                    swal("警告", "数据未修改", "error").then(function (isOk) {
                    });
                    return;

                }
                formData.append("username", username);
                formData.append("userId", userId);
                formData.append("password", password);
                formData.append("uploadLogo", logoFile);
                formData.append("userType", userType);
                formData.append("userStatus", userStatus);
                formData.append("userValidity", userValidity);
                formData.append("editPhone", editPhone);
                formData.append("editNickname", editNickname);
                formData.append("editEmail", editEmail);
                formData.append("action", "editUser");

                $.ajax({
                    url: "../user.do",
                    data: formData,
                    type: "POST",
                    async: false,
                    processData: false, //必须false才会避开jQuery对 formdata 的默认处理
                    contentType: false, //必须false才会自动加上正确的Content-Type
                    success: function (data) {
                        var result = JSON.parse(data)
                        if (result.code === "1") {
                            swal("提示", result.message, "success").then(function (isOk) {
                                window.location.reload();
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                                window.location.reload();
                            });
                        }
                    },
                })
            });
            $("#addUser").click(function () {
                var username = $("#addUserName").val().trim();
                var password = $("#addPassword").val().trim();
                var addPhone = $("#addPhone").val().trim();
                var addEmail = $("#addEmail").val().trim();
                var addNickname = $("#addNickname").val().trim();
                var userType = $("#addUserType").val().trim();
                var userStatus = $("#addUserStatus").val().trim();
                var userValidity = $("#addUserValidity").val().trim();
                var formData = new FormData();
                var logoFile = document.getElementById("addLogoImg").files[0];

                if (!username || !password || !addPhone || !addEmail || !addNickname) {
                    swal("警告", "数据不能为空", "error").then(function (isOk) {
                    });
                    return;
                }


                formData.append("username", username);
                formData.append("password", password);
                formData.append("uploadLogo", logoFile);
                formData.append("userType", userType);
                formData.append("userStatus", userStatus);
                formData.append("userValidity", userValidity);
                formData.append("addPhone", addPhone);
                formData.append("addNickname", addNickname);
                formData.append("addEmail", addEmail);
                formData.append("action", "addUser");

                $.ajax({
                    url: "../user.do",
                    data: formData,
                    type: "POST",
                    async: false,
                    processData: false, //必须false才会避开jQuery对 formdata 的默认处理
                    contentType: false, //必须false才会自动加上正确的Content-Type
                    success: function (data) {
                        var result = JSON.parse(data)
                        if (result.code === "1") {
                            swal("提示", result.message, "success").then(function (isOk) {
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });
                        }
                    },
                    error: function (data) {
                        console.log(data);
                    }

                })
            });

            $("body").on("click", ".delete", function () {
                var id = $(this).attr("data-id").trim();
                $.ajax({
                    url: "../user.do",
                    type: "post",
                    dataType: "text",
                    data: {
                        id: id,
                        "action": "delete"
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        if (result.code == "1") {
                            swal("提示", result.message, "success").then(function (isOk) {
                                location.reload();
                            });
                        } else {
                            swal("提示", result.message, "error").then(function (isOk) {
                            });
                        }
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        .aaa {
            font-size: 40px;
            color: #007FFF;
            width: 80%;
            height: 200px;
            position: relative;
            left: 300px;

        }
    </style>
</head>
<body>
<div class="container">
    <!-- 条件查询div--->
    <div class="row">
        <form action="../user.do?action=queryByCondition">
            <ul class="nav navbar-nav navbar-left " style="float: left;">
                <input type="text" name="action" value="queryByCondition" hidden/>
                <li>
                    <div class="form-group">
                        <label for="editUserName" class="col-sm-4 control-label" style="line-height: 34px;">用户名:</label>
                        <div class="col-sm-8">
                            <input type="text"
                                   value="<%=session.getAttribute("bg_username")==null?"":session.getAttribute("bg_username")%>"
                                   class="form-control" id="username" name="username" placeholder="请输入用户名">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="form-group">
                        <label for="editUserName" class="col-sm-4 control-label"
                               style="line-height: 34px;">手机号码:</label>
                        <div class="col-sm-8">
                            <input type="text" id="phone" class="form-control" name="phone"
                                   value="<%=session.getAttribute("bg_phone")==null?"":session.getAttribute("bg_phone")%>"
                                   placeholder="请输入手机号码：">
                        </div>
                    </div>
                </li>
                <li>
                    <button type="submit" id="queryByCondition" class="btn btn-info btn-sm" data-toggle="modal"
                            data-target="#queryUserBtn">查询
                    </button>
                </li>
            </ul>
        </form>
    </div>


    <div class="row">
        <div class="bs-example" data-example-id="btn-variants">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addUserBtn">新增
            </button>
            <div class="add">
                <div class="modal fade" id="addUserBtn" tabindex="-1" role="dialog" aria-labelledby="addBookLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="addBookLabel">新增会员信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <form class="form-horizontal">
                                            <div class="form-group">
                                                <label for="addUserName" class="col-sm-3 control-label">用户名:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="addUserName"
                                                           name="username" placeholder="请输入用户名">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addPassword" class="col-sm-3 control-label">密码:</label>
                                                <div class="col-sm-9">
                                                    <input type="password" class="form-control" id="addPassword"
                                                           name="password" placeholder="请输入密码">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addPhone"
                                                       class="col-sm-3 control-label">手机号码:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="addPhone"
                                                           name="addPhone" placeholder="手机号码">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addEmail"
                                                       class="col-sm-3 control-label">邮箱:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="addEmail"
                                                           name="addEmail" placeholder="邮箱">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addNickname"
                                                       class="col-sm-3 control-label">昵称:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="addNickname"
                                                           name="nickname" placeholder="昵称">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addLogoImg" class="col-sm-3 control-label">头像:</label>
                                                <div class="col-sm-9">
                                                    <input type="file" class="form-control" id="addLogoImg"
                                                           name="LogoImg" placeholder="上传头像">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addUserType" class="col-sm-3 control-label">用户类型:</label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="addUserType">
                                                        <%
                                                            List<Role> roles = new RoleServiceImpl().queryAll();
                                                            for (Role role : roles) {

                                                        %>
                                                        <option value="<%=role.getId() %>"><%=role.getRoleName() %>
                                                        </option>
                                                        <%
                                                            }
                                                        %>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addUserStatus" class="col-sm-3 control-label">用户状态:</label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="addUserStatus">
                                                        <option value="0">不启用</option>
                                                        <option value="1">启用</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="addUserValidity"
                                                       class="col-sm-3 control-label">账号有效性:</label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="addUserValidity">
                                                        <option value="0">无效</option>
                                                        <option value="1">有效</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-primary opera" id="addUser">添加</button>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="reset" class="btn btn-default">重置</button>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="edit">
                <div class="modal fade" id="editUserBtn" tabindex="-1" role="dialog" aria-labelledby="editUserLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="editUserLabel">修改会员信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <form class="form-horizontal" action="../user.do?action=update">
                                            <div class="form-group">
                                                <label for="editUserName" class="col-sm-3 control-label">用户名:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="editUserName"
                                                           name="username" placeholder="请输入用户名">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editPassword" class="col-sm-3 control-label">密码:</label>
                                                <div class="col-sm-9">
                                                    <input type="password" class="form-control" id="editPassword"
                                                           name="password" placeholder="请输入密码">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editPhone"
                                                       class="col-sm-3 control-label">手机号码:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="editPhone"
                                                           name="editPhone" placeholder="手机号码">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editEmail"
                                                       class="col-sm-3 control-label">邮箱:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="editEmail"
                                                           name="editEmail" placeholder="邮箱">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editNickname"
                                                       class="col-sm-3 control-label">昵称:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="editNickname"
                                                           name="nickname" placeholder="昵称">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editLogoImg" class="col-sm-3 control-label">头像:</label>
                                                <div class="col-sm-9">
                                                    <input type="file" class="form-control" id="editLogoImg"
                                                           name="LogoImg" placeholder="上传头像">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editUserType" class="col-sm-3 control-label">用户类型:</label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="editUserType">
                                                        <%
                                                            roles = new RoleServiceImpl().queryAll();
                                                            for (Role role : roles) {

                                                        %>
                                                        <option value="<%=role.getId() %>"><%=role.getRoleName() %>
                                                        </option>
                                                        <%
                                                            }
                                                        %>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editUserStatus" class="col-sm-3 control-label">用户状态:</label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="editUserStatus">
                                                        <option value="0">不启用</option>
                                                        <option value="1">启用</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="editUserValidity"
                                                       class="col-sm-3 control-label">账号有效性:</label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="editUserValidity">
                                                        <option value="0">无效</option>
                                                        <option value="1">有效</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-primary opera" id="submitEdit">修改</button>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="reset" class="btn btn-default">重置</button>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped" style="margin-bottom: 0;">
                <thead>
                <tr style="text-align: center ; vertical-align:center;">
                    <th>id</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>头像</th>
                    <th>手机号</th>
                    <th>昵称</th>
                    <th>角色</th>
                    <th>邮箱</th>
                    <th>用户状态</th>
                    <th>账号有效性</th>
                    <th>用户操作</th>
                </tr>
                </thead>
                <tbody>
                <%
                    List<User> userList = (List<User>) session.getAttribute("users");
                    if (userList == null) {
                        userList = new UserServiceImpl().queryAll();
                    }
                    for (int i = 0; i < userList.size(); i++) {
                        User user = userList.get(i);
                %>
                <tr style="height: 100px ;vertical-align:middle;text-align: center">

                    <td><%= user.getId()%>
                    </td>
                    <td><%= user.getUsername()%>
                    </td>
                    <td><%= user.getPassword()%>
                    </td>
                    <td>
                        <img style="width: 90px;height: 60px" src="<%= user.getLogoUrl()%>"/>
                    </td>
                    <td><%= user.getPhone()%>
                    </td>
                    <td><%= user.getNickname()%>
                    </td>
                    <%

                        RoleService roleService = new RoleServiceImpl();
                        Long roleId = user.getRoleId();
                        Role role = roleService.queryById(roleId);

                    %>
                    <td data-id="<%=roleId%>">

                        <%= role.getRoleName()%>

                    </td>
                    <td><%= user.getEmail()%>
                    </td>
                    <td data-id="<%=user.getUserStatus()%>"><%= user.getUserStatus() == 1 ? "启用" : "不启用"%>

                    </td>
                    <td data-id="<%=user.getUserValidity()%>"><%=  user.getUserValidity() == 1 ? "有效" : "无效"%>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm editInfo" data-toggle="modal"
                                data-id="<%= user.getId()%>" data-target="#editUserBtn">修改
                        </button>
                        <button type="button" class="btn btn-danger  btn-sm delete" data-id="<%= user.getId()%>">删除
                        </button>
                    </td>
                </tr>
                <%
                    }
                %>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
